import { ReactNode, useEffect, useState } from "react";

interface ButtonSelectProps {
    onChange: (i: any) => any;
    defaultValue?:number;
    groups: {
        label:ReactNode,
        value:any 
     }[]
}

export const ButtonSelect = ({ onChange, groups, defaultValue }: ButtonSelectProps) => {
//  我不想完全搞受控 ，所以才有了这个监听默认值变化的想法， 虽然这实际上确实很像。 正确的做法可能是暴露一个方法，给外部让外部修改这个状态，但是我觉得这和受控组件的那种方式一样麻烦
    const [activeId, setActiveId] = useState(defaultValue || 0)
 
    useEffect(()=> { 
      defaultValue !==undefined &&  setActiveId(defaultValue)
    },[defaultValue])
    return <div className="btn-group">
        {groups.map((v, i) => (<button
            className={"btn " + (i === activeId ? 'selected' : '')}
            onClick={() =>{ 
                setActiveId(i);
                onChange(v.value)}
            }
            key={i}
        >
            {v.label}
        </button>))
        }
    </div>
}